<template>
	<view class="container">
		<view>
			<view v-for="(message, index) in messages" :key="index">
				<view :class="{'my-message': message.sender === sender, 'other-message': message.sender !== sender}">
					<view v-if="message.sender !== sender" class="message-content other-message-content">
						<image mode="aspectFill" class="avatar" :src="toimage"></image>
						<view class="mesBox">{{ message.content }}</view>
					</view>
					<view v-else class="message-content my-message-content">
						<view class="mesBox">{{ message.content }}</view>
						<image mode="aspectFill" class="avatar" :src="myimage"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="input-container">
			<textarea class="imput_area" v-model="inputMessage" placeholder="请输入消息内容"></textarea>
			<button type="primary" @click="sendMessage">发送</button>
		</view>
	</view>
</template>

<script>
	import config from '../../common/config'
	export default {
		data() {
			return {
				sender: this.$global.personInfo.username,
				myimage: config.baseUrl + this.$global.personInfo.imgurl,
				toimage: '/static/logo2.png',
				messages: [],
				// messages: [{
				// 		sender: 'other',
				// 		content: '你好，今天晚上一起吃饭吗？',
				// 		imgurl: '/static/logo2.png'
				// 	},
				// 	{
				// 		sender: '默认用户',
				// 		content: '好的，什么时间？',
				// 		imgurl: '/static/logo2.png'
				// 	},
				// 	{
				// 		sender: 'other',
				// 		content: '7点半可以吗？',
				// 		imgurl: '/static/logo2.png'
				// 	}
				// ],
				inputMessage: '',
				To: '坤坤'
			};
		},

		mounted() {
			this.socket = uni.connectSocket({
				url: 'ws://localhost:9090/websocket/' + this.$global.personInfo.openid,
				complete: () => {
					console.log('WebSocket连接成功');
				},
			});

			this.socket.onMessage((res) => {
				// console.log('收到消息:', res.data);
				let mess = JSON.parse(res.data);
				// console.log(mess);
				// console.log(this.sender);
				if (mess.messageType == 4 && mess.fromUsername != this.sender) {
					this.messages.push({
						sender: mess.fromUsername,
						content: mess.textMessage,
					});
				}

				// this.message = res.data;
			});

			this.socket.onClose(() => {
				console.log('WebSocket连接已关闭');
			});
		},
		methods: {
			onLoad(option) {
				// console.log(opition);
				// this.sender = this.$global.personInfo.username;
				this.To = option.to_id;
				// console.log(this.To);
				this.toimage = option.img;
			},
			sendMessage() {
				// 发送消息到 WebSocket 服务端点
				const message = {
					messageType: 4,
					textMessage: this.inputMessage,
					username: this.$global.personInfo.openid,
					to: this.To
				};
				this.socket.send({
					data: JSON.stringify(message),
					success: () => {
						console.log('消息发送成功');
					},
				});
				uni.request({
					url: config.baseUrl + 'chat/updateMessage',
					method: 'POST',
					data: {
						textMessage: this.inputMessage,
						messageType: 4,
						toUserName: this.To,
						fromUsername: this.$global.personInfo.openid
					},
					success: (res) => {
						console.log(res);
					}
				})
				this.messages.push({
					sender: this.sender,
					content: this.inputMessage,
				});
				console.log(this.messages[this.messages.length - 1]);
				this.inputMessage = '';
			}
		}
	};
</script>

<style>
	.container {
		height: 100vh;
		background: linear-gradient(to bottom, #FFDAB9, #FFF8DC);
		/* 从上往下变淡的橘色渐变 */
		background: linear-gradient(to right, #FFDAB9, #FFF8DC);
		/* 从左往右变淡的橘色渐变 */
	}

	.my-message {
		text-align: right;
		color: blue;
	}

	.mesBox {
		padding: 10rpx;
		border: #797979 solid 1rpx;
		border-radius: 15rpx;
	}

	.imput_area {
		border: 3rpx solid #797979;
		border-radius: 15rpx;
	}

	.other-message {
		text-align: left;
		color: green;
	}

	textarea {
		width: calc(100% - 70px);
		/* 调整文本输入框的宽度，留出发送按钮的空间 */
		height: 70px;
		resize: none;
		/* 禁止调整文本框大小 */
	}

	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 15rpx;
		margin-right: 10px;
		margin-left: 15rpx;
	}

	.my-message-content {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}

	.other-message-content {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}

	.input-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 10px;
		background-color: #f0f0f0;
		/* 设置输入框容器的背景色 */
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>